<template>
  <div class="pay-page">
    <Heads types="payment" title="确认订单"></Heads>

    <!-- 地址 -->
    <van-cell-group class="margin-t10" v-if="defaultArea.length > 0">
      <van-cell center>
        <template #title>
          <div class="van-ellipsis tl">
            <span style="font-size: 16px;">{{defaultArea[0].name}}</span>
            <span style="color: #969799;">{{defaultArea[0].tel}}</span>
          </div>
        </template>
        <template #icon>
          <div style="margin-right: 8px;">
            <van-icon name="location" color="#ff5000" size="24px" />
          </div>
        </template>
        <template #default>
          <span @click="onEdit">
            <van-icon name="edit" size="18px" />
          </span>
        </template>
        <template #label>
          <div class="van-ellipsis" style="margin: 4px 0;">{{defaultArea[0].address}}</div>
          <div style="color: #ff5000;">收货不便时,可选择暂存服务</div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="margin-t10" v-else>
      <van-cell center>
        <template #title>
          <div class="van-ellipsis tl">当前无默认地址</div>
        </template>
        <template #default>
          <div class="van-ellipsis">
            <span @click="onEdit">
              点我去设置
              <van-icon name="edit" size="18px" center />
            </span>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 地址-end -->

    <!-- content-start -->
    <div class="content">
      <!-- 详情页过来 -->
      <div v-if="types === 'obj'">
        <van-card
          class="cart-card"
          :num="obj.selectedNum"
          :price="obj.goods_info.price | decimalPoint"
          :thumb="obj.goods_info.picture"
        >
          <div slot="title" class="van-ellipsis">{{obj.goods_info.title}}</div>
          <div slot="desc">
            <span class="guige">规格: {{obj.s1}};{{obj.s2}};</span>
            <p class="liuyan">发货时间:付款后7个工作日内</p>
          </div>
        </van-card>
      </div>
      <!-- 购物车过来 -->
      <div v-if="types === 'list'">
        <div v-for="item in list" :key="'pay'+item.goodsId+item.selectedId">
          <van-card
            class="cart-card"
            :num="item.selectedNum"
            :price="item.goods_info.price | decimalPoint"
            :thumb="item.goods_info.picture"
          >
            <div slot="title" class="van-ellipsis">{{item.goods_info.title}}</div>
            <div slot="desc">
              <span class="guige">规格: {{item.s1}};{{item.s2}};</span>
              <p class="liuyan">发货时间:付款后7个工作日内</p>
            </div>
          </van-card>
        </div>
      </div>
      <!-- 直接从网址进来 -->
      <div v-if="types === ''">
        <van-empty description="操作错误" />
      </div>
    </div>
    <!-- content-end -->
    <!-- 优惠券 -->
    <div v-if="types !== ''">
      <van-cell-group class="margin-t10">
        <pay-coupon @change-coupon-props="changeCouponProps"></pay-coupon>
      </van-cell-group>
    </div>
    <!-- 提交栏 -->
    <van-submit-bar :price="totalPrice" suffix-label="打发" button-text="提交订单" @submit="onSubmit">
      <template #default>
        <span>数量：{{totalNum}} 件</span>
      </template>
      <!-- <template #tip>
        你的收货地址不支持同城送,
        <span>修改地址</span>
      </template>-->
    </van-submit-bar>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { post } from "@/utils/axios";

import Vue from "vue";
import {
  Card,
  SubmitBar,
  Toast,
  AddressList,
  Empty,
  Cell,
  CellGroup,
  Dialog
} from "vant";
Vue.use(Card)
  .use(SubmitBar)
  .use(Toast)
  .use(AddressList)
  .use(Empty)
  .use(Dialog)
  .use(Cell)
  .use(CellGroup);
import PayCoupon from "@/components/PayCoupon";
export default {
  data() {
    return {
      totalPrice: 0,
      totalNum: 0,
      couponObj: null
    };
  },
  components: {
    PayCoupon
  },
  computed: {
    ...mapState("payModule", ["types", "obj", "list"]),
    ...mapState("addressModule", ["areaLists"]),
    ...mapState("userModule", ["token"]),
    defaultArea() {
      const arr = this.areaLists.filter(item => {
        return item.isDefault === true;
      });
      if (arr.length) {
        return arr;
      } else {
        return [];
      }
    },
    orderId() {
      return `NO#${this.token}#${Date.now()}`;
    }
  },
  methods: {
    ...mapMutations("footerModule", ["FOOTERSHOW"]),
    ...mapMutations("payModule", ["SETTYPES", "SETOBJ", "SETLIST"]),
    ...mapActions("addressModule", ["getAddressAction"]),
    ...mapActions("userModule", ["GETUSERINFO"]),
    beforeClose(action, done) {
      if (action === "confirm") {
        // 分为两种情况, 都存数组好了
        post({
          url: "/hybrid/uni/place-an-order",
          data: {
            goods: this.types === "obj" ? [this.obj] : this.list,
            address: this.defaultArea[0],
            orderID: this.orderId,
            coupon: this.couponObj,
            type: 1,
            // 直接详情页,还是购物车下单
            orderForm: this.types
          }
        }).then(res => {
          // 更新优惠券列表
          this.GETUSERINFO();
          Toast({
            message:
              "总计: " + (this.totalPrice / 100).toFixed(2) + "元。下单成功",
            closeOnClick: true
          });
          // setTimeout(done, 1000);// 异步关闭
          done();
          this.$router.replace({
            name: 'User-result'
          })
        });
      } else {
        done();
      }
    },
    // 确认订单
    onSubmit() {
      if (!this.couponObj) {
        Toast({
          message:
            "总计: " +
            (this.totalPrice / 100).toFixed(2) +
            "元。请选择优惠券抵扣",
          closeOnClick: true
        });
      } else {
        // console.log(this.couponObj.value, this.totalPrice);
        if (this.couponObj.value >= this.totalPrice) {
          Dialog.confirm({
            title: "确认下单吗?",
            message: "请熟知: 优惠券不设找零，一经使用不予返还",
            beforeClose: this.beforeClose,
            confirmButtonColor: "#ff5000",
            closeOnClickOverlay: true,
            closeOnPopstate: true
          });
        } else {
          Toast({
            message:
              "总计: " +
              (this.totalPrice / 100).toFixed(2) +
              "元。优惠券额度不够",
            closeOnClick: true
          });
        }
      }
    },
    // 地址事件
    onEdit() {
      this.$router.push({ name: "Address-list" });
    },
    // 选择优惠券事件
    changeCouponProps(item) {
      this.couponObj = item;
    }
  },
  mounted() {
    this.FOOTERSHOW(false);
    this.getAddressAction();
    if (this.types === "obj") {
      this.totalPrice = this.obj.selectedNum * this.obj.goods_info.price;
      this.totalNum = this.obj.selectedNum;
    }
    if (this.types === "list") {
      this.totalPrice = this.list
        .map(item => {
          return item.selectedNum * item.goods_info.price;
        })
        .reduce((a, b) => a * 1 + b * 1);
      this.totalNum = this.list
        .map(item => {
          return item.selectedNum;
        })
        .reduce((a, b) => a * 1 + b * 1);
    }
  },
  destroyed() {
    this.FOOTERSHOW(true);
    // 不设置为空;不然改个地址回来没了; 只是每次重新进来替换在加载
    // this.SETTYPES('')
    // this.SETOBJ(null)
    // this.SETLIST(null)
  }
};
</script>

<style lang="scss" scoped>
.pay-page {
  padding-bottom: 50px;
  .margin-t10 {
    margin: 8px 12px;
    border-radius: 4px;
    overflow: hidden;
    .tl {
      text-align: left;
    }
  }
  .cart-card {
    text-align: left;
    margin: 0 12px;
  }
  .guige {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0 4px;
  }
  .liuyan {
    color: rgb(233, 176, 84);
    margin-top: 8px;
  }
}
</style>
